<template>
  <div class="searchList">
    <div class="headers">
      <div class="header">
        <Header></Header>
        <ul>
          <li
            v-for="(item, index) in headerList.data"
            :key="index"
            @click="changeIndex(index)"
          >
            <span :class="index == headerList.currentIndex ? 'active' : ''">{{
              item.name
            }}</span>
            <div class="sx" v-show="index != 0">
              <i
                class="iconfont icon-shangjiantou"
                :class="item.status == 1 ? 'active' : ''"
              ></i>
              <i
                class="iconfont icon-xiajiantou"
                :class="item.status == 2 ? 'active' : ''"
              ></i>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <section>
      <ul class="list" v-show="list.length">
        <li
          v-for="(item, index) in list"
          :key="index"
          @click="goDetail(item.id)"
        >
          <div class="img">
            <img v-lazy="item.imgUrl" alt="" />
          </div>
          <h6>{{ item.name }}</h6>
          <div class="text">
            <span class="price">￥{{ item.price }}</span>
            <span class="btn">立即购买</span>
          </div>
        </li>
      </ul>
      <div v-show="!list.length">无此商品数据</div>
    </section>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
// 头部Header
import Header from "@/components/Search/Header.vue";
import Tabbar from "@/components/Tabbar.vue";
import http from "@/common/request";
import { Lazyload } from "mint-ui";
export default {
  name: "searchList",
  data() {
    return {
      list: [],
      headerList: {
        currentIndex: 0,
        data: [
          { name: "综合", type: "zh" },
          { name: "价格", status: 0, type: "price" },
          { name: "销量", status: 0, type: "num" },
        ],
      },
    };
  },
  created() {
    this.getData();
  },
  computed: {
    order() {
      let obj = this.headerList.data[this.headerList.currentIndex];
      let val = obj.status === 1 ? "asc" : "desc";
      return {
        [obj.type]: val,
      };
    },
  },
  methods: {
    changeIndex(index) {
      this.headerList.currentIndex = index;
      // 点击的下标对应的数据是哪一个
      let item = this.headerList.data[index];
      // 让其他的状态都为零
      this.headerList.data.forEach((v, i) => {
        if (i != index) {
          v.status = 0;
        }
      });
      // 点击当前改变状态
      if (index == this.headerList.currentIndex) {
        item.status = item.status == 1 ? 2 : 1;
      }
      this.getData();
    },
    async getData() {
      // console.log(this.order);
      let res = await http.$axios({
        url: "/api/goods/shopList",
        params: {
          searchName: this.$route.query.key,
          ...this.order,
        },
      });
      // console.log(res);
      this.list = res.data;
    },
    goDetail(id) {
      this.$router.push({
        path: "/detail",
        query: {
          id,
        },
      });
    },
  },
  components: { Tabbar, Header },
  watch: {
    $route() {
      this.getData();
    },
  },
};
</script>

<style scoped>
.searchList {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
}
.headers {
  width: 100%;
  height: 90px;
}
.header {
  position: fixed;
  top: 0;
}
section .list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
section .list li {
  display: flex;
  flex-direction: column;
  width: 160px;
  height: 190px;
  /* background-color: #f5f5f5; */
  margin: 10px;
}
.list {
  height: 0;
}
section .list li .img {
  width: 100%;
  height: 120px;
}
section .list li .img img {
  width: 100%;
  height: 100%;
}
section .list li h6 {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
section .list li .text {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
section .list li span {
  font-size: 14px;
}
section .list li .price {
  color: red;
}
section .list li .btn {
  width: 64px;
  text-align: center;
  background-color: red;
  border-radius: 10px;
  color: #eee;
}

ul {
  height: 40px;
  background-color: #f5f5f5;
  display: flex;
  font-size: 18px;
  justify-content: space-around;
  line-height: 30px;
}
li {
  display: flex;
  justify-content: center;
  align-items: center;
}
.sx {
  height: 40px;
  display: flex;
  flex-direction: column;
}

.sx i {
  width: 14px;
  height: 14px;
}

section {
  flex: 1;
  overflow: hidden;
}

.active {
  color: red;
}
</style>